<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="echarts.js"></script>
  <script src="jquery-3.6.3.min.js"></script>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
  <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
    rel="stylesheet">
  <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
</head>

<body>

  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width:1200px;height:600px"></div>

  <div class='col-sm-2'>
    <div class="mainx">
      <div class="txt">日期：</div>
      <div class="dates"><input type='text' class="form-control" value="" id='datetime' /></div>
      <button class="bt">获取数据</button>
    </div>
  </div>


  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
      title: {
        text: '异步数据加载示例'
      },
      tooltip: {},
      legend: {
        data: ['实际温度']
      },
      xAxis: {
        data: []
      },
      yAxis: {},
      series: [
        {
          name: '实际温度',
          type: 'line',
          smooth: true,
          data: []
        }
      ]
    });

    //添加日期选择框
    $(function () {
      $("#datetime").datetimepicker({
        format: 'YYYY-MM-DD',
        locale: moment.locale('zh-cn')
      })
    });

    //按钮点击获取数据
    $(document).ready(function () {
      $("button").click(function () {
        $t = $("#datetime").val();
        $url = 'http://192.168.3.61:8877/readdata/index?today=' + $t;
        // 异步加载数据
        $.get($url).done(function (data) {
          // 填入数据
          myChart.setOption({
            xAxis: {
              data: data.time
            },
            series: [
              {
                // 根据名字对应到相应的系列
                name: '实际温度',
                data: data.temp
              }
            ]
          });
        });
      });
    });
  </script>

<style>
.mainx{
  background-color: azure;
  width: 400px;
  display: flex;
}
.txt{
  font-size: 32px;
  width: 100px;
}
.dates{
  width: 170px;
  display: flex;
  align-items: center;
  margin-right: 30px;
}

.bt{
  width:100px;
}


</style>
</body>

</html>